<template>
	<div class="returnrequest">
	<back :title="title"></back>
	<body class="body">
		<p class="tips" v-show="isShow">店里暂时还没有产品哦~</p>
		<div class="contents" v-for="(item,index) in productList" :key="index">
			<div class="productlist">
				<div class="left">
					<input class="leftbox" type="checkbox" :value="{'id':item.id,'index':index}" v-model="myVal" />
				</div>
				<div class="middle">
					<img class="thumbnail" :src="item.thumbnail" />
				</div>
				<div class="right">
					<p class="producttitle">{{item.productName}}</p>
					<p class="prices">
						<span>押金：</span>
						<span style="color: red;">￥</span>
						<span style="color: red;">{{item.deposit}}</span>
					</p>
					<p class="prices"><span>租赁价格：</span>
						<span style="color: red;">￥</span>
						<span style="color: red;">{{item.rentPrice}}</span>
						<span style="color: red;">元/每天</span>
					</p>
				</div>
			</div>
			<div class="box">
				<ul class="car">
					<li class="subtract" @click="subtract(index)">-</li>
					<li class="count">
						<input type="number" ref="count" value=1 size="1">						
					</li>
					<li class="add" @click="add(index)">+</li>
				</ul>
			</div>
		</div>
	</body>
	<footer class="footers">
		<div class="submit" @click="submit">提交申请</div>
	</footer>
</div>
</template>

<script>
import back from '@/components/m-shop/m-store/back'

export default {
	name:'returnrequest',
	components: {
		back
	},
	data() {
		return {
			title: '退货申请',
			productList:[],
			submitList:[],
			myVal:[],
			isShow:false
		}
	},
	created(){
         this.getproductList();
	},
	mounted() {
       
	},
	methods: {
		//获取产品列表
		getproductList () {
				this.$http.get(this.$store.state.reqUrl + '/shops/stock', {
					params:{
						shopId:this.$store.state.shop_id
					}
				}).then(res => {
				  if(res.data.list.length === 0){
				  	 this.isShow = true
				  	 this.productList = []
				  }else{
				  	 this.productList = res.data.list
				  }
		    })		
		},	
		//增加产品数量
		add(index) {
			this.$refs.count[index].value++;
		},
		//减少数量
		subtract(index) {
			if(this.$refs.count[index].value <= 1) {
				this.$toast({
					message:'该宝贝不能再减少了哟~',
					duration:1000,
					})
				this.$refs.count[index].value = 1;
			} else {
				this.$refs.count[index].value -= 1;
			}
		},
		//循环提交选择的数据
		addData () {
			for(let i = 0;i< this.myVal.length;i++) {				
				this.submitList.push({
						"productId":this.myVal[i].id,
					    "purchaseCount":this.$refs.count[this.myVal[i].index].value
				})
			}
		},
		//提交
		submit () {
			this.submitList = [];
			this.addData()
			console.log(this.submitList)
			if(this.submitList.length === 0){
				this.$messagebox.alert("请选择需要退货的产品！")
				return false;
			}
			this.$http.post(this.$store.state.reqUrl + '/shops/depurchase', {
				   productInfo:this.submitList,
				   shopId:this.$store.state.shop_id
			     }).then(res => {
			     	this.$toast("申请成功！")
			     	this.$router.back(-1)
		     }).catch(res => {
		     	this.$toast(res.response.data)
		     })
		}
	}
}
</script>

<style scoped>
   .returnrequest {
   	width: 100%;
   }
   .body{
   	background: none;
   	margin-top: 100px;
   	margin-bottom:150px;
   }
   .tips{
   	    font-size: 34px;
	 	color: darkgray;
	 	text-align: center;
	 	margin-top: 50%;
   }
   .addShop{
   	position: fixed;
   	width:100%;
   	top:100px;
   	bottom: 10px;
   	height: 80px;
   }
   .addShop input{
   	 width:100%;
   	 height: 100%;
   } 
   .contents {
   	padding: 25px 25px;
   	background: #FFFFFF;
   	overflow: hidden;  	
   	border-bottom: 1px solid gainsboro;
   }
   .productlist {
   	display: flex;
   	display:-webkit-flex; 
    align-items:center; 
   -webkit-align-items:center; 
   }
   .left {
     	width: 100px;
     	margin-left: 20px;
   }
   input[type="checkbox"] {
      background: #FFFFFF;
      border-radius: 100%;
      border:1px solid gainsboro;
      height: 50px; 
      outline: none;
      vertical-align: middle;
      width: 50px;
   }
    input[type="checkbox"]:checked {
/*       -webkit-appearance: none;*/
       outline: none;
       background: #45b97c;
   }
   .middle {
   	width: auto;
   }
   .right {
   	flex: 1;
   	margin-left: 25px;
   }  
   .prices{
   	 font-size: 26px;
   }
   .producttitle{
   	font-size: 30px;
   	font-weight: 700;
   	margin-bottom: 20px;
   }
   .thumbnail{
   	  width:150px;
   	  height: 150px;
   }
   .box{
   	 float: right;
   	 margin-top:20px;
   	 border: 1px solid gainsboro;
   	 width:200px;
   	 height: 60px;
   }
   .car{
   	 width:100%;
   	 height: 100%;
   	 display: flex;
   }
   .subtract{
   	  text-align: center;
   	  line-height: 60px;
   	  flex: 1;
   }
   .count{
   	  width:70px;
   	  border-left: 1px solid gainsboro;
   	  text-align: center;
   	  line-height: 60px;
   }
   .count input{
   	  outline: none;
   	  width:70px;
   	  height: 60px;
   }
   .add{
   	  text-align: center;
   	  line-height: 60px;
   	  border-left: 1px solid gainsboro;
   	  flex: 1;
   }
   ul,li {
   	list-style: none;
   	font-size: 26px;
   }
   li {
   	float: left;
   }
   input{
   	text-align: center;
   }
   input:focus {
   	outline: none;
   	text-align: center;
   }
   .footers {
   	position: fixed;
   	bottom: 0;
   	left: 0;
   	height: 130px;
   	width: 100%;
   	background: #FFFFFF;
   }
   .submit{
   	   float: right;
   	   width:150px;
   	   height: 80px;
   	   text-align: center;
   	   line-height:80px;
   	   border: 1px solid gainsboro;
   	   margin-top: 25px;
   	   border-radius: 30px;
   	   margin-right: 20px;
   	   background: #f47920;
   	   font-size: 28px;
   	   color: #FFFFFF;
   }
</style>